<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="请输入菜单名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getMenuList">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="menus" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<!--<el-table-column type="selection" width="55">-->
			<!--</el-table-column>-->
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-table :data="props.row.children">
						<el-table-column type="index" width="60">
						</el-table-column>
						<el-table-column prop="name" label="二级菜单名称" width="120" >
						</el-table-column>
						<el-table-column prop="path" label="二级菜单路由" width="120">
						</el-table-column>
						<el-table-column prop="iconcls" label="二级图标" width="150" >
						</el-table-column>
						<el-table-column prop="component" label="二级菜单组件名称" width="180">
						</el-table-column>
						<el-table-column prop="url" label="二级菜单接口地址" min-width="180">
						</el-table-column>
						<el-table-column label="操作" width="150">
							<template scope="scope">
								<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
								<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="name" label="菜单名称" width="120" >
			</el-table-column>
			<el-table-column prop="path" label="路由" width="100">
			</el-table-column>
			<el-table-column prop="iconcls" label="图标" width="150" >
			</el-table-column>
			<el-table-column prop="component" label="组件名称" width="120">
			</el-table-column>
			<el-table-column prop="url" label="接口地址" min-width="180">
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<!--<el-col :span="24" class="toolbar">-->
			<!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
			<!--<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">-->
			<!--</el-pagination>-->
		<!--</el-col>-->

		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="菜单名称" prop="name">
					<el-input v-model="editForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="路由" prop="path">
					<el-input v-model="editForm.path" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="图标" prop="iconcls">
					<el-input v-model="editForm.iconcls" ></el-input>
				</el-form-item>
				<el-form-item label="组件名称" prop="component">
					<el-input v-model="editForm.component" ></el-input>
				</el-form-item>
				<el-form-item label="接口地址" prop="url">
					<el-input v-model="editForm.url" ></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="菜单名称" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="一级菜单">
					<el-radio-group v-model="addForm.isFirstMenu" @change="isShow">
						<el-radio class="radio" :label="1">是</el-radio>
						<el-radio class="radio" :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="父级菜单" v-if="isShowParentMenu">
					<el-select  placeholder="请选择" @change="selectMenu" v-model="addForm.parentId">
						<el-option
								v-for="item in parentMenu"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="路由" prop="path">
					<el-input v-model="addForm.path"></el-input>
				</el-form-item>
				<el-form-item label="组件名称" prop="component">
					<el-input v-model="addForm.component"></el-input>
				</el-form-item>
				<el-form-item label="接口地址" prop="url">
					<el-input v-model="addForm.url"></el-input>
				</el-form-item>
				<el-form-item label="图标" prop="iconcls">
					<el-input v-model="addForm.iconcls"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>
<script>
	import {requestMenu,requestEditMenu,requestAddMenu,rquestSaveMenu,delMenu} from "../../api/api";
	export default {
		data() {
			return {
				filters: {
					name: ''
				},
				menus: [],
				parentMenu:[],
				total: 0,
				page: 1,
				listLoading: true,
				sels: [],//列表选中列
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				isShowParentMenu:false,//父级菜单是否显示
				editFormRules: {
					name: [
						{ required: true, message: '请输入菜单名称', trigger: 'blur' }
					],
					path: [
						{ required: true, message: '请输入路由', trigger: 'blur' }
					],
					component: [
						{ required: true, message: '请输入组件名称', trigger: 'blur' }
					],
					url: [
						{ required: true, message: '请输入接口地址', trigger: 'blur' }
					],
				},
				//编辑界面数据
				editForm: {
					id: 0,
					name: '',
					path: '',
					component: '',
					url: '',
					iconcls: ''
				},
				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
					path:[{ required: true, message: '请输入路由', trigger: 'blur' }],
					component:[{ required: true, message: '请输入组件名称', trigger: 'blur' }],
					url:[{ required: true, message: '请输入接口地址', trigger: 'blur' }],
				},
				//新增界面数据
				addForm: {
					name: '',
					path:'',
					component:'',
					url:'',
					parentId:'',
					iconCls:'',
					isFirstMenu:''
				}
			}
		},
		methods: {
			//性别显示转换
			formatSex: function (row, column) {
				return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let params = new URLSearchParams();
					params.append("id",row.id);
					console.log("菜单id是"+row.id);
					delMenu(params).then((res)=>{
                       if(res.code==200){
						   this.$message({
							   message: '删除成功',
							   type: 'success'
						   });
						   this.listLoading=false;
						   this.getMenuList();
					   }
					}).catch((error)=>{
						if(error.data){
							this.$message({
								message:error.data.msg,
								type:'error'
							})
						}else{
							this.$message({
								message:"服务器连接异常，请稍后.....",
								type:'error'
							})
						}
					});
				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				requestAddMenu().then((res)=>{
                    this.parentMenu=res.data;
				}).catch(error=>{
					if(error.data){
						this.$message({
							message:error.data.msg,
							type:'error'
						})
					}else{
						this.$message({
							message:"服务器连接异常，请稍后.....",
							type:'error'
						})
					}
				})
			},
			isShow(val){
				if(val == 1){
					this.isShowParentMenu=false;
					this.addForm.parentId=0;
				}
				if(val == 0){
					this.isShowParentMenu=true;
				}
			},
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认修改吗？', '提示', {}).then(() => {
							this.editLoading = true;
							//NProgress.start();
							let menu = Object.assign({}, this.editForm);
							let params = new URLSearchParams();
							params.append("id",menu.id);
							params.append("name",menu.name);
							params.append("path",menu.path);
							params.append("component",menu.component);
							params.append("url",menu.url);
							params.append("iconcls",menu.iconcls);
							//para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
							requestEditMenu(params).then((res) => {
								//console.log(res);
								if(res.code==200){
									this.editLoading = false;
									//NProgress.done();
									this.$message({
										message: '修改成功',
										type: 'success'
									});
								}
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getMenuList();
							}).catch(error=>{
								this.editLoading = false;
								if(error.data){
									this.$message({
										message:error.data.msg,
										type:'error'
									})
								}else{
									this.$message({
										message:"服务器连接异常，请稍后.....",
										type:'error'
									})
								}
							});
						});
					}
				});
			},
			//新增
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认添加吗？', '提示', {}).then(() => {
							this.addLoading = true;
							//NProgress.start();
							let menu = Object.assign({}, this.addForm);
							let params = new URLSearchParams();
							params.append("name",menu.name);
							params.append("path",menu.path);
							params.append("component",menu.component);
							params.append("url",menu.url);
							params.append("iconcls",menu.iconcls);
							params.append("parentid",menu.parentId);
							rquestSaveMenu(params).then((res) => {
								this.addLoading = false;
								//console.log(res);
								if(res.code==200){
									this.$message({
										message: '添加成功',
										type: 'success'
									});
									this.$refs['addForm'].resetFields();
									this.addFormVisible = false;
									this.getMenuList();
								}
							}).catch(error=>{
								this.addLoading = false;
								if(error.data){
									this.$message({
										message:error.data.msg,
										type:'error'
									})
								}else{
									this.$message({
										message:"服务器连接异常，请稍后.....",
										type:'error'
									})
								}
							});
						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			selectMenu:function(val){
				this.addForm.parentId=val;
			},
			getMenuList(){
				let _this = this;
				let name = this.filters.name;
				let menuParams = new URLSearchParams();
				menuParams.append("keyWord",name);
				requestMenu(menuParams).then(res=>{
					_this.menus = res.data;
					_this.listLoading = false;
				}).catch(error=>{
					if(error.data){
						_this.$message({
							message:error.data.msg,
							type:'error'
						})
					}else{
						_this.$message({
							message:'服务器异常，请稍后.......',
							type:'error'
						})
					}
				})
			},
		},
		mounted() {
			this.getMenuList();
		}
	}
</script>
<style scoped>

</style>